import React, {Component}      from 'react';
import {
    StyleSheet,
    View,
    ListView,
    Dimensions,
    Text,
    Image,
    TouchableOpacity
}from 'react-native';
import BaseNavigationBar       from '../../views/BaseNavigationBar';
import ReceiveCoupons          from '../../utils/receiveCoupons';
import  LinearGradient         from 'react-native-linear-gradient';
import StorageUtil from "../../utils/StorageUtil";
import * as BaseAPI from "../../utils/BaseAPI";
const {width,height} = Dimensions.get('window');

export default class ReceiveCouponsScreen extends Component {

    constructor(props){
        super(props);
        this.state = {
            noData:'',
            dataSource : new ListView.DataSource(
                { rowHasChanged: (r1, r2) => r1.uuid !== r2.uuid }),
        };
    }

    // componentDidMount() {
    //
    //     console.log('彩票日子'+ ReceiveCoupons.data + JSON.stringify(ReceiveCoupons.data));
    //
    //     this.setState({
    //         dataSource:this.state.dataSource.cloneWithRows(ReceiveCoupons.data)
    //     });
    // }

    componentWillMount() {
        StorageUtil.get('token',(error,object)=>{
            if (!error && object != null)
            {
                this.getReceiveCouponsData(object.token);
            }
        });
    }

    // 获取优惠券
    // getReceiveCouponsData(){
    //
    //     // GetMyTicketDataUrl
    //
    //
    // }

    getReceiveCouponsData(token){
        // this.setState({showProgress:true});

        console.log("优惠期嘎嘎嘎嘎"+ BaseAPI.GetMyTicketDataUrl+token);

        fetch(BaseAPI.GetMyTicketDataUrl+token, {
            method:'GET'
        }).then((res)=>res.json())
            .then((json)=>{

                console.log('优惠券'+ json + JSON.stringify(json));
                if (json.ret === 0){
                    var data =json.list.length ;
                    console.log('暂无数据'+  data + JSON.stringify(data));
                    if (json.list.length === 0){
                        this.setState({noData:true});
                    } else {
                        this.setState({noData:false});
                        this.setState({
                            dataSource:this.state.dataSource.cloneWithRows(json.list)
                        });
                    }

                } else {

                }
            })
            .catch((e)=>{

                console.log('失败又回去啊哈'+ e + JSON.stringify(e));

                // this.setState({showProgress:false});
                // // // 网络错误
                // this.refs.toast.show('网络请求出错：' + e);
            })
    }


    popToBack(){
        this.props.navigation.goBack()
    }

    goUseCoupons(rowData){
        this.props.navigation.navigate("CouponsDetail",{CouponsDetailData:rowData})
    }

    renderRow(rowData){
        return (
            <View style = {styles.cellViewStyle}>
                <View style = {{flexDirection:'row',alignItems:'center'}}>
                    <Image
                        style={{width:0.56*172,height:0.56*164,backgroundColor:'red'}}
                        source={require('../../../images/other/pic_default.png')}/>
                    <View style = {{flexDirection:'column',marginLeft:0.56*20,marginTop:0.56*20}}>
                        <Text style = {{fontSize:15,color:'#333333'}}>
                            {rowData.title}</Text>
                        <View style={{flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
                            <View style={{flexDirection:'column'}}>
                                <Text numberOfLines={1} style = {{fontSize:14,marginTop:0.56*18,color:'#ff4517'}}>
                                    价值:{rowData.value}</Text>
                                <Text numberOfLines={1} style = {{fontSize:11,marginTop:0.56*36,color:'#909090'}}>
                                    {rowData.total}人已领取</Text>
                            </View>
                            {/*<LinearGradient colors={['#fe7133','#ff4114']} style={styles.linearGradient}>*/}
                            {/*<TouchableOpacity activeOpacity={1} onPress={() => this.goUseCoupons()}>*/}
                            {/*<Text style={{color:'#fdfdfd',fontSize:14}}>立即使用</Text>*/}
                            {/*</TouchableOpacity>*/}
                            {/*/!*<Text style={{color:'#fdfdfd',fontSize:14}}>立即使用</Text>*!/*/}
                            {/*</LinearGradient>*/}
                            <TouchableOpacity activeOpacity={1} onPress={() => {this.goUseCoupons(rowData)}}>
                              <LinearGradient colors={['#fe7133','#ff4114']} style={styles.linearGradient}>
                                <Text style={{color:'#fdfdfd',fontSize:14}}>立即使用</Text>
                              </LinearGradient>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </View>
        )
    }

    renderFooterView(){
        return (
            <View style={{width: width, height:0.56*40}}/>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <BaseNavigationBar
                    title={'领取优惠券'}
                    leftImageSource={require('../../../images/other/ic_back.png')}
                    leftItemFunc={() => this.popToBack()}/>

                {/*创建ListView*/}
                <ListView
                    showsVerticalScrollIndicator={false}
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow.bind(this)}
                    renderFooter={this.renderFooterView}
                />

                {this.state.noData?(<View style={styles.noDataViewStyle}>
                    <Image style={{width:90,height:60}}
                           source={require('../../../images/other/pic_noData.png')}/>
                    <Text style={{fontSize:13,color:'#c2c2c2',marginTop:10}}>这里暂时没有什么东西</Text>
                </View>):(null)}

                {/*<View style={{width:width, height:0.56*40}}/>*/}

                {/*<Toast ref="toast" position='center'/>*/}

                {/*{this.state.noData?(<View style={styles.noDataViewStyle}>*/}
                {/*<Text style={{fontSize:16,color:'#b2b4b8'}}>暂无数据</Text>*/}
                {/*</View>):(null)}*/}

                {/*{this.state.showProgress?(<LoadingView cancel={()=> this.setState({showProgress:false})}/>):(null)}*/}

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1
    },
    cellViewStyle:{
        backgroundColor:'white',
        height:0.56*192,
        justifyContent:'center',
        alignItems:'center',
        margin:0.56*10
    },
    noDataViewStyle:{
        width:width,
        height:height,
        justifyContent:'center',
        alignItems:'center'
    },
    linearGradient: {
        justifyContent:'center',
        alignItems:'center',
        width:0.56*180,
        height:0.56*50,
        marginLeft:0.56*10,
        borderRadius:0.56*25
    },
});
